<template>
  <view>
    <scroll-view scroll-y="true">
      <!-- 列表显示 -->
      <view>
        <view class="" v-for="d in list">
          <uni-card :title="d.user.info.nickname || d.user.user.username">
            <view class="">
              <view class="" @click="showDetail(d.mid)">
                {{ d.title }}
              </view>

              <view class="message-info">
                <view class="">
                  {{Api.formatDate(d.lastupdate)}}
                </view>
                <view class="">
                  赞 {{ d.praise }}
                </view>
              </view>

            </view>
          </uni-card>
        </view>
      </view>

      <!-- 加载更多 -->
      <view class="">
        <uni-load-more @clickLoadMore="loadmore" :content-text="moreContent" :status="more"
          icon-type="circle"></uni-load-more>
      </view>

    </scroll-view>
  </view>
</template>

<script setup>
  // 补全发帖功能
  import {
    ref,
    onMounted
  } from 'vue'

  import {
    onPullDownRefresh,
    onLoad,
    onShow
  } from '@dcloudio/uni-app'

  import {
    Api
  } from '../../js/api.js';


  const showDetail = (id) => {
    uni.navigateTo({
      url: `/pages/message/detail?id=${id}`
    })
  }

  const more = ref('more')

  onPullDownRefresh(() => {
    page.value.pageNumber = 1
    list.value = []
    query(() => {
      uni.stopPullDownRefresh()
    })
  })

  const loadmore = () => {
    more.value = 'loading'
    page.value.pageNumber++
    if (page.value.pageNumber > page.value.pageCount) {
      more.value = 'noMore'
      return
    }
    query()
  }

  const moreContent = {
    contentdown: "点击加载更多",
    contentrefresh: "正在加载...",
    contentnomore: "没有更多数据了"
  }

  const page = ref({
    pageSize: 10,
    pageNumber: 1
  })


  const order = ref(1)
  const info = ref('')
  const list = ref([])

  const query = (cb) => {
    uni.showLoading({
      title: '加载中'
    })
    Api.get(
      `/message/${page.value.pageSize}/${page.value.pageNumber}/${order.value}`, {
        info: info.value
      }, (data) => {
        uni.hideLoading()
        more.value = 'more'
        cb?.call()
        if (data.success) {
          page.value = data.data.pageBean
          list.value = list.value.concat(data.data.list)
          return
        }
        uni.showToast({
          title: data.message,
          icon: 'error'
        })

      }
    )
  }

  onShow(() => {
    query()
  })
</script>

<style>
  .message-info {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0px;
  }
</style>